<template>
 <div class="user">
   <img class="bg" src="@/assets/image/bg-image/bg1.jpg">
   <div class="mainInformation">
    <div class="signature">“ {{this.user.signature}} ”</div>
    <div class="center">
      <el-upload
      action="http://106.15.195.184:10010/user/user/avatar"
      :headers='headersObj'
      :auto-upload="false"
      :http-request="summitForm"
      ref="upload"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :before-upload="beforeUpload"
      >
      <img v-if="user.avatarUrl" :src="user.avatarUrl" class="avatar" />
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <!-- <img class="avatar" :src="user.avatarUrl" alt=""> -->
    <div class="nickname">
      <img src="@/assets/icon/man.png" alt="" v-if="user.sex == 1">
      <img src="@/assets/icon/woman.png" alt="" v-else-if="user.sex == 0">
      <span>{{user.nickname}}</span>
    </div>
    </div>
   </div>
   <div class="user-nformation">
    <div class="score">
        <div class="scoreContent">
          <div class="avaliableIntegralValue">可用积分：{{score.avaliableIntegralValue}}</div>
          <div class="gainIntegralValue">总获取积分：{{score.gainIntegralValue}}</div>
          <div class="usedIntegralValue">已使用积分：{{score.usedIntegralValue}}</div>
        </div>
    </div>
    <el-tooltip content="点击修改个人信息">
      <div class="bottomInformation"  @click.native="showUpdateUserDialog()">
        <div class="content">
          <div class="email">邮箱： {{user.email}}</div>
          <div class="phone">电话： {{user.phone}}</div>
          <div class="realName">姓名： {{user.realName || '未知'}}</div>
          <div class="createdTime">账号创建时间： {{(user.createdTime).slice(0,10)}}</div>
        </div>
      </div>
    </el-tooltip>

    
    <div class="count">剩余使用次数： {{user.count}}</div>  
    <div class="updatePwd" @click="showUpdatePwdDialog()">
      <span>更改密码</span>
      <img class="right" src="@/assets/icon/right.png" alt="">
    </div>
    <user-dialog :updateUserDialogVisible="this.updateUserDialogVisible"></user-dialog>
    <pwd-dialog :updatePwdDialogVisible="this.updatePwdDialogVisible"></pwd-dialog>
   </div>
 </div>
</template>

<script>
import api from '@/api/user_index.js';
import score_api from '@/api/score_index.js';
import http from '@/http/http.js'
import axios from 'axios'
import pwdDialog from '@/components/dialog/pwdDialog.vue';
import userDialog from '@/components/dialog/userDialog.vue';
import {mapState,mapMutations} from 'vuex'

 export default {
 components: { 
    pwdDialog,
    userDialog,
  },
 data () {
 return {
    picture:{},
    headersObj:{
      token:localStorage.getItem('token')
    },
    eventList:[]
  }
 },
 computed:{
  ...mapState('moduleUser',['user']),
  ...mapState('moduleScore',['score']),
  ...mapState('moduleDialog',['updatePwdDialogVisible','updateUserDialogVisible']),
 },
 methods:{
  ...mapMutations('moduleUser',['updateUserAvatarUrl']),
  ...mapMutations('moduleDialog',['updatepwdDialog','updateuserDialog']),
  handlePictureCardPreview(file) {
      console.log(file)
      this.updateUserAvatarUrl(file.url)
      this.$refs.upload.submit();
  },
  beforeUpload(picture){
      this.picture = picture
      api.getUser()
  },
  // 上传头像
  summitForm(row) {
    var data =new FormData;
    data.append("file",this.picture)
    var that = this
   console.log('ok')
    axios({
        method:"Post",
        url:"http://106.15.195.184:10010/user/user/avatar",
        headers: {
        //请求头这个一定要写
            'Content-Type': 'multipart/form-data',
        },
        data:data
    }).then(function (res) {
      console.log(res)
    }).catch(function (error){
       console.log(error)
    })
  },
  showUpdatePwdDialog(){
    this.updatepwdDialog()
  },
  showUpdateUserDialog(){
    this.updateuserDialog()
    console.log('ok')
  },
  getScoreEvent(){
    score_api.getScoreEvent().then((res) => {
      // console.log(res)
      if(res.data.code == 200){
        this.eventList = res.data.obj
      }
    }).catch((err) => {
      console.log(err)
    })
  },
 }
}

</script>
<style scope lang="less">
.user{
  .bg{
    width: 100%;
    height: 200px;
    z-index: -10;
  }
  .mainInformation{
    // position: relative;
    // bottom: 135px;
    .signature{
      position: relative;
      bottom: 175px;
      font-size: 12px;
      color: #28627C;
      cursor: pointer;
      &:hover{
        color: #67C23A;
      }
    }
    .center{
      position: relative;
      bottom: 135px;
      .el-upload{
        height: 70px;
        width: 78px;
        border-radius: 40px;
        margin-bottom: 10px;
        .avatar{
        height: 80px;
        width: 80px;
        border-radius: 40px;
        margin-bottom: 10px;
      }
    }
    .nickname{
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: #28627C;
      img{
        height: 25px;
        width: 25px;
      }
    }
    }
    
  }
  .user-nformation{
    position: relative;
    bottom: 110px;
    .score{
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 13px;
      color: #6d6d6d;
      .scoreContent{
        display: flex;
        box-shadow: 0px 5px 5px #ddd;
        border-radius: 10px;
        background-color: #fff;
        div{
          margin-right: 10px;
          margin-bottom: 20px;
          margin: 30px 10px 30px 10px;
          padding: 5px 5px;
          vertical-align: middle;
          border: 1px solid  #FBEFBA;
          border-radius: 10px;
          background-color: #FBFAF1;
        }
      }
    }
    .bottomInformation{
      display: flex;
      justify-content: center;
      text-align: left;
      .content{
        margin-top: 30px;
        padding: 10px 95px;
        box-shadow: 0px 5px 5px #ddd;
        border-radius: 10px;
        background-color: white;
        div{
          font-size: 14px;
          padding: 10px 0px;
          color: #6d6d6d;
        }
      }
    }
    .count{
      font-size: 14px;
      color: #6d6d6d;
      margin-top: 45px;
    }
    .updatePwd{
       display: flex;
       position: relative;
       align-items: center;
       justify-content: right;
       top: 50px;
       margin-right: 10px;
       font-size: 14px;
       cursor: pointer;
       &:hover{
        color: #67C23A;
       }
      .right{
        height: 16px;
        width: 16px;
      }
     
    }
  }
  
}
.el-drawer__close{
  height: 20px;
  width: 20px;
}
  
</style>